<template>
    <z-paging
        :use-virtual-list="true"
        :auto-show-back-to-top="true"
        :loading-full-fixed="true"
        :auto-show-system-loading="true"
        ref="pagingRef"
        @query="queryListFn"
    >
        <template #top>
            <!-- 导航栏搜索 -->
            <view class="px-20">
                <view class="stickyTop">
                    <view class="df mb-10">
                        <uv-icon
                            name="search"
                            color="#1F87C6"
                            size="40rpx"
                        ></uv-icon>
                        <uv-input
                            v-model="searchValue"
                            :focus="true"
                            type="text"
                            clearable
                            placeholder="请输入关键字"
                            @confirm="search"
                            border="bottom"
                        />
                    </view>
                    <view class="box-top df">
                        <view
                            v-for="(item, index) in disastersData"
                            :key="index"
                            class="disSelect"
                            :class="isSelect === index ? 'ybg' : 'nbg'"
                            @click="disClick(index)"
                        >
                            {{ item.name }}
                        </view>
                    </view>
                </view>
                <view v-if="isSelect == 0 || isSelect == 2" class="py-32">
                    <uv-checkbox-group
                        v-model="checkboxValue"
                        @change="checkboxChange"
                    >
                        <uv-checkbox
                            :customStyle="{ padding: '0 8px' }"
                            v-for="(item, index) in checkboxList"
                            :key="index"
                            :label="item.name"
                            :name="item.value"
                        ></uv-checkbox>
                    </uv-checkbox-group>
                </view>
            </view>
        </template>
        <template #cell="{ item, index }">
            <view class="mx-20 cards mt-30" @click="toIntro(item)">
                <view class="row1 fs-28">{{ item.name }}</view>
                <view class="df jsb ac" style="color: #888888">
                    <view class="fs-28 row1">
                        {{ item.mold || item.linPoOrQiePo }}
                    </view>
                    <view class="fs-28 row1">{{ item.type }}</view>
                    <view class="df jce ac" @click.stop="toMap(item)">
                        <view class="fs-28 row1">{{ item.address }}</view>
                        <image
                            src="@/static/img/home/redmap.png"
                            style="height: 40rpx"
                            mode="heightFix"
                        ></image>
                    </view>
                </view>
            </view>
        </template>
        <template #empty>
            <uv-empty
                mode="list"
                marginTop="0rpx"
                iconSize="180"
                textSize="28"
            ></uv-empty>
        </template>
    </z-paging>
</template>

<script lang="ts" setup>
import {
    getjianCe_API,
    getqiePoJianFan_API,
    getxiangMu_API,
    getyinHuanDian_API,
    getzxq_API,
} from '@/server/mapdzfz'
import { getLoginMsg } from '@/utils/util'

const disastersData = [
    { name: '隐患点' },
    { name: '监测点' },
    { name: '切坡建房' },
    { name: '速报点' },
    { name: '项目' },
]
const isSelect = ref(0)
const disClick = (index: number) => {
    isSelect.value = index
    checkboxValue.value = ['0', '1', '2', '3', '4']
    pagingRef.value.reload()
}
const checkboxValue = ref(['0', '1', '2', '3', '4'])
const checkboxList = [
    { name: '极高', value: '4', checked: true },
    { name: '高', value: '3', checked: true },
    { name: '中', value: '2', checked: true },
    { name: '低', value: '1', checked: true },
    { name: '待定', value: '0', checked: true },
]
const searchValue = ref('')

const search = () => {
    pagingRef.value.reload()
}
const pagingRef = ref()
/**
 * 获取数据
 * @param pageNo 当前页
 * @param pageSize 条数
 */
const queryListFn = async (pageNo: any, pageSize: any) => {
    const params = {
        current: pageNo,
        size: pageSize,
        code: getLoginMsg()?.AdminCode,
        name: searchValue.value,
        riskLevel: undefined,
    }
    try {
        let res
        switch (isSelect.value) {
            case 0:
                params.riskLevel = checkboxValue.value.join(',')
                res = await getyinHuanDian_API(params)
                break
            case 1:
                res = await getjianCe_API(params)
                break
            case 2:
                params.riskLevel = checkboxValue.value.join(',')
                res = await getqiePoJianFan_API(params)
                break
            case 3:
                res = await getzxq_API(params)
                break
            case 4:
                res = await getxiangMu_API(params)
                break
        }
        if (res.code == 0) {
            pagingRef.value.complete(res.data.data.records)
        }
    } catch (error) {
        pagingRef.value.complete(false)
    }
}
const checkboxChange = (e) => {
    pagingRef.value.reload()
}
const toMap = (val) => {
    if (!val.lon && !val.lat) {
        return uni.showToast({
            icon: 'error',
            title: '没有经纬度信息！',
        })
    }
    val.typeItem = isSelect.value
    val.pointtype = isSelect.value + 1 + ''
    const mapData = JSON.stringify(val)
    try {
        uni.setStorageSync('map_key', mapData)
    } catch (e) {
        console.log(e)
    }
    uni.switchTab({
        url: '/pages/tabbar/map/map',
    })
}
const toIntro = (val) => {
    switch (isSelect.value) {
        case 0:
            uni.navigateTo({
                url: '/pages/home/basic/dangerBasic?code=' + val.code,
            })
            break
        case 1:
            uni.navigateTo({
                url: '/pages/home/details/monitor?code=' + val.code,
            })
            break
        case 2:
            uni.navigateTo({
                url: '/pages/home/basic/cutSlopeBasic?code=' + val.code,
            })
            break
        case 3:
            uni.navigateTo({
                url: '/pages/home/basic/disasterDanger?code=' + val.id,
            })
            break
        case 4:
            uni.navigateTo({
                url: '/pages/home/basic/projectItem?code=' + val.id,
            })
            break
    }
}
</script>

<style lang="scss" scoped>
// .stickyTop {
//     width: 100%;
//     position: sticky;
//     /* #ifdef APP-PLUS */
//     position: fixed;
//     /* #endif */
//     top: 0;
//     z-index: 999;
// }

.disSelect {
    padding: 20rpx 0;
    width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    font-weight: bold;
    box-sizing: border-box;

    &:first-child {
        border-top-left-radius: 5rpx;
        border-bottom-left-radius: 5rpx;
    }

    &:last-child {
        border-top-right-radius: 5rpx;
        border-bottom-right-radius: 5rpx;
    }

    &:nth-child(2n) {
        border-left: none;
        border-right: none;
    }
}

.ybg {
    background-color: #1f87c6;
    border: solid 2rpx #1f87c6;
    color: #ffffff;
}

.nbg {
    background-color: #ffffff;
    border: solid 2rpx #cdcdcd;
    color: #888888;
}
</style>
